<template>
  <el-tabs
      class="group-tabs"
      v-model="active"
      type="card"
      :stretch="false"
      tab-position="top"
      @tab-click="tabClick"
  >
    <el-tab-pane class="group-tab-pane" label="基本信息" name="brief">
      <TenantBaseInfo />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="租户配置" name="attr">
      <AttributeList
          :ref="'attr'"
          :entry="entry"/>
    </el-tab-pane>
<!--    <el-tab-pane class="group-tab-pane" label="用户列表" name="users">-->
<!--      -->
<!--    </el-tab-pane>-->
<!--    <el-tab-pane class="group-tab-pane" label="用户分组" name="userGroups">-->
<!--    </el-tab-pane>-->
<!--    <el-tab-pane class="group-tab-pane" label="角色列表" name="roles">-->
<!--    </el-tab-pane>-->
<!--    <el-tab-pane class="group-tab-pane" label="权限列表" name="permits">-->
<!--    </el-tab-pane>-->
<!--    <el-tab-pane class="group-tab-pane" label="菜单列表" name="menus">-->
<!--    </el-tab-pane>-->
  </el-tabs>
</template>

<script setup lang="ts">
import {currentNames, SERVERS} from '@/stores/conf'
import AttributeList from '@/widget/list/AttributeList.vue'
import TenantBaseInfo from "@/widget/info/TenantBaseInfo.vue";

import '@/styles/tabs.css'
import {useListTabs} from "@/utils/UseListTabs";
import {ref} from "vue";

const {active, tabClick, handleCurrent, handleSwitch} = useListTabs('brief');

defineExpose({
  handleCurrent,
  handleSwitch,
})

const entry = ref({
  name: currentNames.TENANT,
  type: '',
  server: SERVERS.PLATFORM
});

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.group-tabs >>> .el-tabs__header {
  padding-left: 16px;
}
</style>
